import React from "react";
import { INVOICE_DETAIL_STATUS } from '../../utils/Enum';
import { Form, Row, Col, Button, Card, Descriptions, InputNumber, Icon, Input } from 'antd';
import { formItemLayout } from '../../utils/globalUIConfig';

const FormItem = Form.Item;

class InvoiceDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            formRef:React.createRef(),
        }
    }
    addOrUpdateInvoice = (values) => {
        console.log(values);
        console.log(this.state.formRef.current.getFieldValue());
    }
    render() {
        const { invoiceDetailStatus, onClose, data } = this.props;
        // let allRoleWIthIdTostring = [];// 为了解决验证错误
        const {
            name = '', number, amount, due,
        } = data;
        let DETAIL_CONTENT = {};
        switch (invoiceDetailStatus) {
            case INVOICE_DETAIL_STATUS.ADD:
                DETAIL_CONTENT = (
                    <div>
                        <Row>
                            <Col span={12}>
                                <Form onFinish={this.addOrUpdateInvoice} ref={this.state.formRef}>
                                    <FormItem name={name} {...formItemLayout}
                                        label='用户姓名'
                                        rules={
                                            [{
                                                required: true,
                                                max: 30,
                                                message: '请输入用户姓名'
                                            }]
                                        }
                                    >
                                        <Input
                                            style={{ width: 300 }}
                                            placeholder='请输入用户真实姓名'
                                        />
                                    </FormItem>
                                    <FormItem name={number} {...formItemLayout}
                                        label='数量'
                                        rules={
                                            [{
                                                required: true,
                                                max: 30,
                                                message: '请输入数量'
                                            }]
                                        }
                                    >
                                        <Input
                                            style={{ width: 300 }}
                                            placeholder='请输入数量'
                                        />
                                    </FormItem>
                                    <FormItem name={amount} {...formItemLayout}
                                        label='总计'
                                        rules={
                                            [{
                                                required: true,
                                                max: 30,
                                                message: '请输入总计金额'
                                            }]
                                        }
                                    >
                                        <Input
                                            style={{ width: 300 }}
                                            placeholder='请输入总计金额'
                                        />
                                    </FormItem>
                                    <FormItem name={due} {...formItemLayout}
                                        label='发票日期'
                                        rules={
                                            [{
                                                required: true,
                                                max: 30,
                                                message: '请输入发票日期'
                                            }]
                                        }
                                    >
                                        <Input />
                                    </FormItem>
                                </Form>

                            </Col>
                        </Row>
                        <Row type="flex" justify="center">
                            <Col span={5}>
                                <Button style={{ width: 200 }} type='primary' onClick={this.addOrUpdateInvoice}>确定</Button>
                            </Col>
                            <Col span={3} />
                            <Col span={5}>
                                <Button style={{ width: 200 }} onClick={onClose}>取消</Button>
                            </Col>
                        </Row>
                    </div>
                );
                break;
            case INVOICE_DETAIL_STATUS.VIEW:
                DETAIL_CONTENT = (
                    <Descriptions bordered style={{ marginBottom: "2em" }}>
                        <Descriptions.Item label="姓名">
                            {name || ''}
                        </Descriptions.Item>
                        <Descriptions.Item label="数量">
                            {number || ''}
                        </Descriptions.Item>
                        <Descriptions.Item span={1} label="总价">
                            {amount || ''}
                        </Descriptions.Item>
                        <Descriptions.Item span={1} label="发票日期">
                            {due || ''}
                        </Descriptions.Item>
                    </Descriptions>);
                break;
            case INVOICE_DETAIL_STATUS.EDIT:
                DETAIL_CONTENT = (
                    <div>
                        <Form className="login-form">
                            <FormItem {...formItemLayout} label='用户真实姓名'
                                name={name}
                                initialValue={name}
                                rules={[{
                                    required: true,
                                    message: '请输入用户真实姓名',
                                }]}
                            >
                                <Input
                                    style={{ width: 300 }}
                                    placeholder='请输入用户真实姓名'
                                />
                            </FormItem>
                        </Form>

                        <Row type="flex" justify="center">
                            <Col>
                                <Button
                                    type='primary'
                                    size='large'
                                    onClick={this.addOrUpdateInvoice}
                                    style={{ width: 200, heigh: 40 }}
                                >确定
                                </Button>
                            </Col>
                            <Col span={3} />
                            <Col>
                                <Button
                                    size='large'
                                    style={{ width: 200, heigh: 40 }}
                                    onClick={onClose}
                                >取消
                                </Button>
                            </Col>
                        </Row>
                    </div >
                );
                break;
            default:
                break;
        }
        return (
            <>
                {DETAIL_CONTENT}
            </>
        );
    }
}

export default InvoiceDetail;